<template>
  <view class="contents">
    <view v-if="list.length" slot="body">
      <view :key="index" v-for="(item, index) in list">
        <view @click="goDetail(item)" v-if="item.msg_type == 'html'" class="box">
          <view class="title">{{ item.title }}</view>
          <!-- <view class="cont" v-html="item.content"></view> -->
        </view>

        <view v-else class="box">
          <view @click="go(item)" class="title">{{ item.title }}</view>
        </view>
      </view>
    </view>

    <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
    <u-loadmore
      v-if="list.length != 0"
      :status="status"
      @loadmore="loadmore"
    ></u-loadmore>
  </view>
</template>

<script>
import api from "../../../api/routes";
export default {
  data() {
    return {
      page: 1,
      limit: 8,
      status: "loadmore",
      list: [],
      total: 0,
      load: false,
    };
  },
  onLoad() {
    this.getList();
  },
  onReachBottom() {
    if (this.status === "loadmore") {
      this.loadmore();
    }
  },
  methods: {

     goDetail(e) {
       uni.navigateTo({
        url: `/package/pages/searchJob/noticeDetail?id=${e.id}`,
      });
    },

    go(item) {
       uni.navigateTo({
        url: `/package/pages/webView/webView?name=${item.title}&url=${item.content}`,
      });
    },
    async getList() {
      if (this.load) {
        return;
      }
      this.load = true;

      this.status = "loading";
      const res = await this.$myRequest({
        url: api.msgCenter,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
        },
      });
      this.load = false;
      if (res.data.code !== 0) {
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });
        this.status = "nomore";
      }
      this.total = res.data.page.totalCount;
      this.list = [...this.list, ...res.data.page.list];

      this.ismore();
    },

    ismore() {
      if (this.total === this.list.length) {
        this.status = "nomore";
      } else {
        this.status = "loadmore";
      }
    },
    loadmore() {
      this.page++;
      this.getList();
    },
  },
};
</script>

<style scoped lang="scss">
.contents {
  padding: 20px 10px;
  .box {
    padding: 10px;
    background: #f8f7f7;
    border-radius: 5px;
    margin-bottom: 10px;
    .title {
      font-size: 26rpx;
      color: #333;
      padding: 10rpx;
    }
    .cont {
      font-size: 24rpx;
      color: #777;
      padding: 10rpx;
      overflow: hidden;
    }
  }
}

</style>